<template>
  <div id="app">
    <el-container>
      <el-header>
        <el-menu :default-active="$route.path" mode="horizontal" background-color="#409EFF" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="/home" @click="$router.push('/home')">首页</el-menu-item>
          <el-menu-item index="/user" @click="$router.push('/user')">个人中心</el-menu-item>
          <el-menu-item index="/orders" @click="$router.push('/orders')">充电服务</el-menu-item>
          <el-menu-item index="/repair" @click="$router.push('/repair')">报修</el-menu-item>
          <el-menu-item index="/car" @click="$router.push('/car')">车辆信息</el-menu-item>
          <el-menu-item index="/recharge" @click="$router.push('/recharge')">账户充值</el-menu-item>
          <el-menu-item index="/appointment" @click="$router.push('/appointment')">充电预约</el-menu-item>
          <el-menu-item index="/appointment-code" @click="$router.push('/appointment-code')">预约码</el-menu-item>
          <el-menu-item index="/appointment-sign" @click="$router.push('/appointment-sign')">预约签到</el-menu-item>
          <el-menu-item index="/coupon" @click="$router.push('/coupon')">优惠券</el-menu-item>
          <el-menu-item index="/refund" @click="$router.push('/refund')">退款</el-menu-item>
          <el-menu-item index="/statistics" @click="$router.push('/statistics')">数据统计</el-menu-item>
          <el-submenu v-if="$store.state.role==='admin' || $store.state.role==='MANAGER' || $store.state.role==='REPAIR'" index="/admin">
            <template slot="title">管理后台</template>
            <el-menu-item index="/admin" @click="$router.push('/admin')">后台首页</el-menu-item>
            <el-menu-item index="/admin/user" @click="$router.push('/admin/user')">用户管理</el-menu-item>
            <el-menu-item index="/admin/repair" @click="$router.push('/admin/repair')">报修管理</el-menu-item>
            <el-menu-item index="/admin/fee" @click="$router.push('/admin/fee')">费用管理</el-menu-item>
            <el-menu-item index="/admin/pile" @click="$router.push('/admin/pile')">充电桩管理</el-menu-item>
            <el-menu-item index="/admin/station" @click="$router.push('/admin/station')">充电站管理</el-menu-item>
            <el-menu-item index="/admin/flow" @click="$router.push('/admin/flow')">流量统计</el-menu-item>
            <el-menu-item index="/admin/violation" @click="$router.push('/admin/violation')">会员违约统计</el-menu-item>
            <el-menu-item index="/admin/price" @click="$router.push('/admin/price')">时段价格管理</el-menu-item>
            <el-menu-item index="/admin/coupon" @click="$router.push('/admin/coupon')">优惠券管理</el-menu-item>
            <el-menu-item index="/admin/mobile-pile" @click="$router.push('/admin/mobile-pile')">移动桩申请</el-menu-item>
            <el-menu-item index="/admin/inspection" @click="$router.push('/admin/inspection')">巡检管理</el-menu-item>
          </el-submenu>
          <el-menu-item index="/login" v-if="!$store.getters.isLogin" @click="$router.push('/login')">登录</el-menu-item>
          <el-menu-item index="/logout" v-if="$store.getters.isLogin" @click="handleLogout">退出</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  name: 'App',
  methods: {
    ...mapMutations(['logout']),
    handleLogout() {
      this.logout();
      this.$router.push('/login');
    }
  }
};
</script>

<style>
#app {
  min-height: 100vh;
  background: #f5f6fa;
}
.el-header {
  background: #409EFF;
  color: #fff;
  padding: 0;
}
</style>
